<template>
	<div class="content">
		<block v-if="isExamine">
			<div class="tab_box">
				<div @click="tabClick(item.id,index)" :class="tabIndex == index?'box on':'box'" v-for="(item,index) in tabList">
					<img :src="item.iconUrl" alt="">
					<p class="text">{{item.localName}}</p>
				</div>
			</div>

			<div class="change_city" @click="show = true">
				<p>{{cityName?cityName:'选择省/市'}}</p>
				<u-icon name="arrow-down-fill" color="#4E5969" size="16"></u-icon>
			</div>
			<!-- <u-picker @cancel=closePop @close="closePop" closeOnClickOverlay title="选择接单群" :show="show" :columns="columns"></u-picker> -->
			<u-picker keyName="shortname" @cancel=closePop @close="closePop" closeOnClickOverlay title="选择接单群"  :show="show" ref="uPicker" :columns="columns" @change="changeHandler" @confirm="confirm"></u-picker>

			<div class="list_box" v-if="list.length">
				<div class="list" @click="toXq(item.id)" v-for="(item,index) in list" :key="index">
					<!-- <u-image radius="10rpx" width="270rpx" height="180rpx" :src="item.pictures[0]" :lazy-load="true"></u-image> -->
					<img mode="aspectFit" class="img" :src="item.pictures[0]" alt="">
					<div class="msg">
						<div>
							<p class="title">{{item.title}}</p>
							<p class="label">{{item.categoryName}}</p>
						</div>
						<div class="dw">
							<p>
								<img src="/static/local-dw.png" alt="">
								{{item.areaName}}
							</p>
							<p @click.stop="addGive(item.id,index)" :style="{color:item.flag?'#23AC39':'#999'}">
								<img v-if="item.flag" src="/static/local-dz-hover.png" alt="">
								<img v-else src="/static/local-dz.png" alt="">
								{{item.likesNum?item.likesNum:0}}
							</p>
						</div>
					</div>
				</div>
				<p v-if="isDown" class="isDown">暂无更多数据～</p>
			</div>

			<div class="no_data" v-else>
					<img src="/static/no-data.png" alt="">
					<p>暂无内容</p>
				</div>

			<div class="anniu_box">
				<div class="box" :style="{paddingBottom:isIphoneXnum+'px'}">
					<p @click="toFabu">一手加入</p>
					<p @click="toMyFabu">我发布的</p>
				</div>
			</div>
		</block>
		<div class="no_data" v-else>
			<img src="/static/no-data.png" alt="">
			<p>该功能即将上线！</p>
		</div>
	</div>
</template>

<script>
	import { mapState ,mapActions} from 'vuex'
	import api from '@/api';
	export default {
		data() {
			return {
				show: false,
                columns: [],
                columnData: [],
				tabList:[],
				tabIndex:-1,
				isIphoneXnum:0,
				param:{
					pageNo:1,
					pageSize:10,
					area:'',
					category:'',
					status:''
				},
				list:[],
				cityName:'',
				isDown:false,
				isExamine: false, // 是否需要审核
			}
		},
		computed: {
			...mapState({
                userId: state => state.user.userId
			})
		},
		onLoad() {

			this.getAreaTree()
			this.getList()
		},
		async onShow(){
			await api.user.get_IOS_enable().then((res) => {
				if (res.code == 200) {
					this.isExamine = res.data
				}
			})
			this.getFbList(true)
			uni.getSystemInfo({
				success: (res) => {
					console.log("手机信息res" + res.model);
					let modelmes = res.model;
					if (
						modelmes.search("iPhone 16") != -1 ||
						modelmes.search("iPhone 15") != -1 ||
						modelmes.search("iPhone 14") != -1 ||
						modelmes.search("iPhone 13") != -1 ||
						modelmes.search("iPhone 12") != -1 ||
						modelmes.search("iPhone 11") != -1 ||
						modelmes.search("iPhone X") != -1 ||
						modelmes.search("iPhone XR") != -1 ||
						modelmes.search("iPhone XS") != -1
					) {
						this.isIphoneXnum = 25;
					} else {
						this.isIphoneXnum = 0;
					}
				},
			});
		},
		methods: {

			// 点赞
			addGive(id,index) {
				let data = {
					memberUserId:this.userId,
					localRecordId:id
				}
				if (this.timer) {
					return;
				}
				this.timer = setTimeout(() => {
					api.user.click_create(data).then(res=>{
						if(res.code == 200){
							this.list[index].flag = true
							this.list[index].likesNum++
						}else{
							this.$toast(res.msg)
						}
					})
					this.timer = null;
				}, 500); 
			},

			// tab切换
			tabClick(id,index){
				console.log(id)
				this.param.pageNo = 1
				this.param.category = id
				this.tabIndex = index
				this.isDown = false
				uni.vibrateShort();
				this.getFbList(true)
			},

			// 获取列表
			getFbList(state){
				this.$showLoading('加载中...')
				api.user.record_page(this.param).then(res=>{
					if(res.code == 200){
						uni.hideLoading();
						if(this.param.pageNo>=1 && res.data.list.length < 10){
							this.isDown = true
						}
						if(this.param.pageNo>1 && !res.data.list.length){
							this.param.pageNo--
						}
						if(state){
							this.list = []
						}
						res.data.list.map(item=>{
							if(item.pictures){
								item.pictures = item.pictures.split(',')
							}
						})
						this.list = this.list.concat(res.data.list)
					}
				})
			},

			// 获取地区
			getAreaTree(){
				api.user.getAreaTree().then(res=>{
					if(res.code == 200){
						this.columns = [res.data.level1]
						this.columnData = res.data.level2
						this.columns.push(res.data.level2[0])
						console.log(this.columns)
					}
				})
			},

			changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
                console.log('confirm', e)
				this.cityName = e.value[1].shortname
                this.show = false
				this.param.area = e.value[1].id
				// this.param.category = ''
				this.getFbList(true)
			},

			toFabu(){
				uni.navigateTo({
					url: '/pages/local/fabu/index'
				});
			},

			toXq(id){
				uni.navigateTo({
					url: `/pages/local/xq/index?id=${id}`
				});
			},

			toMyFabu(){
				uni.navigateTo({
					url: '/pages/local/myFabu/index'
				});
			},

			closePop(){
				this.show = false
			},

			getList(){
				api.user.getAppLocalFirst().then(res=>{
					if(res.code == 200){
						// this.param.category = res.data[0].id
						this.tabList = res.data
					}
				})
			}
		},
		onReachBottom(){
			this.param.pageNo++
			this.getFbList()
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(180deg, #E1F2E3 0%, rgba(240, 243, 246, 0) 100%);
		/deep/ .u-popup__content{
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
		}
		.tab_box{
			padding:0 40rpx 40rpx 40rpx;
			.box{
				display: inline-block;
				width: 19.2%;
				text-align: center;
				margin-top:54rpx;
				font-size: 26rpx;
				color: #333333;
				border:1px solid transparent;
				border-radius: 10rpx;
				padding:12rpx 0;
				&.on{
					border-color:#23AC39;
					box-shadow: 0px 0px 8rpx 0px #23AC39;
					pointer-events: none;
				}
				img{
					width: 60rpx;
					height: 60rpx;
					margin-bottom:16rpx;
				}
			}
		}
		.change_city{
			display: flex;
			align-items: center;
			margin:0 30rpx;
			background: #fff;
			height: 80rpx;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #4E5969;
			padding:0 32rpx;
			p{
				margin-right:12rpx;
			}
		}
		.list_box{
			margin:0 30rpx;
			padding-bottom:50rpx;
			.list{
				display: flex;
				background: #fff;
				margin-top:20rpx;
				border-radius: 10rpx;
				.img{
					width: 270rpx;
					height: 180rpx;
					border-radius: 10rpx;
				}
				.msg{
					flex: 1;
					display: flex;
					justify-content: space-around;
					flex-direction:column;
					padding:0 22rpx;
					.title{
						font-size: 30rpx;
						font-weight: bold;
						color: #3D3D3D;
					}
					.label{
						display: inline-block;
						padding:0 8rpx;
						background: #23AC39;
						color:#fff;
						font-size:24rpx;
						font-weight: 500;
						border-radius: 6rpx;
						margin-top:10rpx;
					}
					.dw{
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #999999;
						font-size:24rpx;
						p{
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						img{
							width: 30rpx;
							height: 30rpx;
							margin-right:4rpx;
						}
					}
				}
			}
			.isDown{
				text-align: center;
				color:#999;
				margin:30rpx 0;
				font-size:26rpx;
			}
		}
		.anniu_box{
			width: 100%;
			height: 150rpx;
			.box{
				width: 92%;
				height: 150rpx;
				position: fixed;
				bottom:0;
				left: 0;
				padding:0 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #FFFFFF;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
				p{
					width: 46%;
					height: 96rpx;
					line-height: 96rpx;
					background: linear-gradient(270deg, #62CE73 0%, #23AC39 100%);
					border-radius: 100rpx;
					text-align: center;
					color: #fff;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
		.no_data{
			text-align: center;
			padding-bottom:50rpx;
			img{
				width: 320rpx;
				height: 320rpx;
			}
			p{
				font-size: 24rpx;
				color: #999999;
				margin-top:-40rpx;
			}
		}
	}
</style>
